<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      background-color=" #7cf1f1"
      active-text-color=" #0fda7e"
      default-active="2"
      router
      :collapse="collapse"
    >
      <el-menu-item index="message">
        <el-icon><User /></el-icon>
        <span>入住信息管理</span>
      </el-menu-item>
      <el-menu-item index="infoPage">
        <i class="el-icon-s-promotion"></i>
        <span>系统首页</span>
      </el-menu-item>
      <el-menu-item index="message">
        <i class="el-icon-user-solid"></i>
        <span>入住信息管理</span>
      </el-menu-item>
      <el-menu-item index="room">
        <i class="el-icon-s-home"></i>
        <span>房间管理</span>
      </el-menu-item>
      <el-menu-item index="drug">
        <i class="el-icon-first-aid-kit"></i>
        <span>药品管理</span>
      </el-menu-item>
      <el-menu-item index="nurse">
        <i class="el-icon-coordinate"></i>
        <span>护士管理</span>
      </el-menu-item>
      <el-menu-item index="physis">
        <i class="el-icon-odometer"></i>
        <span>病人生理状态</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Aside',
  props:['collapse'],
  data() {
    return {}
  },
  computed: {
    ...mapState({
      Collapse: (state) => state.aside.Collapse
    })
  },
}

</script>

<style scoped>
.sidebar {
  background-color: #7cf1f1;
  display: block;
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 0;
  overflow-y: scroll;
}
</style>
